<template>
  <div id="chatting">
    <div id="chatList">
      <chat-person
        @toClick="toChangeName"
        :name="this.chatPersonName"
      ></chat-person>
      <a-modal
        v-model="this.visible"
        title="修改名字"
        @ok="changeChatName(chatNewName)"
        @cancel="cancel"
      >
        <a-input placeholder="请输入新名字" v-model="chatNewName" />
      </a-modal>
      <hr class="line" />
      <chat-list :list="this.chatList"></chat-list>
      <div class="form">
        <a-input
          class="inputName"
          placeholder="请输入评论"
          v-model="chatText"
        />
        <a-button class="inputButton" type="primary" @click="send"
          >发送</a-button
        >
      </div>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "../components/HelloWorld.vue";
import { sendDiscuss, viewDiscuss } from "../../api/chat";
import ChatList from "../../components/chat/chatList.vue";
import ChatPerson from "../../components/chat/chatPerson.vue";
export default {
  name: "chatting",
  data() {
    return {
      chatList: [
        {
          name: "123",
          time: "123",
          content: "123",
        },
        { name: "123", time: "123", content: "123" },
        { name: "123", time: "123", content: "123" },
        { name: "123", time: "123", content: "123" },
        { name: "123", time: "123", content: "123" },
        { name: "123", time: "123", content: "123" },
      ],
      chatPersonName: "default",
      chatNewName: "",
      chatText: "",
      visible: false,
    };
  },
  mounted() {
    viewDiscuss().then((res) => {
      // console.log(res);
      const data = res.data;
      if (data.code) {
        this.chatList = data.list.list;
      }
    });

    // websocket
    // console.log("munt");
    // const ws = new WebSocket("ws://" + location.host);
    // ws.onopen = function () {
    //   console.log("ws-open");
    // };
    // ws.onmessage = function (message) {
    //   console.log("ws-message", message);
    // };
    // ws.onerror = function (error) {
    //   console.log("ws-error", error);
    // };
    // ws.onclose = function () {
    //   console.log("ws-close");
    // };
    // 缓存
    let name = localStorage.getItem("chat-name");
    if (name) {
      this.chatPersonName = JSON.parse(name);
    }
  },
  components: {
    ChatList,
    ChatPerson,
  },
  methods: {
    toChangeName() {
      console.log("vis", this.visible);
      this.visible = true;
    },
    send() {
      if (this.chatText) {
        let data = new URLSearchParams();
        data.append("username", this.chatPersonName);
        data.append("content", this.chatText);
        sendDiscuss(data).then((res) => {
          console.log(res);
        });
      } else {
        this.$message.warning("评论内容不能为空");
      }
    },
    cancel() {
      this.chatNewName = "";
      this.visible = false;
    },
    changeChatName(name) {
      console.log(name);
      if (name) {
        // changeName(name).then((res) => {
        // console.log(res);
        // 缓存
        localStorage.setItem("chat-name", name);
        this.chatPersonName = name;
        this.$message.success("更改成功");
        // });
        // 清空
        this.cancel();
        return;
      }
      this.$message.warning("名字不能为空");
    },
  },
};
</script>

<style>
/* #app { */
/* font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
#chatting {
  position: absolute;
  width: 100%;
  height: 100%;
  background: black;
}

.form {
  /*border: 1px solid black;*/
  overflow: hidden;
}
.form .inputName {
  width: 86%;
}

.form .inputButton,
.inputName {
  float: left;
  margin-left: 10px;
}
.line {
  height: 0;
  margin: 0;
  margin-left: -10px;
  padding: 0;
  width: 105%;
  border: 1px solid black;
  background: black;
}

@media screen and (max-width: 1250px) {
  #chatList {
    margin: 20px auto;
    padding: 5px;
    border: 1px solid white;
    border-radius: 16px;
    background: white;
    width: 95%;
    height: 95%;
  }
}
@media screen and (min-width: 1200px) {
  #chatList {
    margin: 20px auto;
    padding: 5px;
    border: 1px solid white;
    border-radius: 16px;
    background: white;
    width: 55%;
    height: 95%;
  }
}
</style>
